<template>
  <div class="game-card-box">
    <img class="image" :src="message.game.imgUrl" alt="">

    <div class="game-card-theme">

    </div>
    <div class="game-card-button">
      {{ message.game.btnText }}
    </div>
    <div class="game-card-name">
      {{ message.game.name }}
    </div>
  </div>
</template>

<script lang="ts" setup>
const message = defineProps({
  game: {
    required: true
  }
})
</script>

<style lang="less" scoped>
.game-card-box {
  height: 100% ;
  width: 100%;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  padding: 0 2px;
  border: 3px solid rgba(255, 255, 255);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
  rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
  rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

  .image {
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0;
    left: -1px;
    border-radius: 10px 10px 0 0;

  }

  .game-card-theme {
    width: 100%;

    height: 45%;
    position: absolute;
    left: 0;
    background: url("@/assets/icons/transparent.png");
    bottom: 0;
    //background-color: #74ebd5;
    border-radius: 30% 30% 0 0;
    backdrop-filter: saturate(180%) blur(20px);

    margin-top: 2px;
    z-index: 1;
  }

  .game-card-button {
    width: 78%;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    bottom: calc(45% - 42px);
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    left: 11%;
    color: white;
    border: 2px solid white;
    z-index: 10;
  }

  .game-card-button:hover {
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    cursor: pointer;
    animation: all 0.3;
    box-shadow: -5px 5px 5px rgba(110, 101, 101, 0.3);
  }

  .game-card-name {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 15px;
    color: #ffffff;
    font-size: 16px;
    z-index: 10;
  }
}
</style>